[#import "/framework/JGP_FRONT.htm"  as JGP]
<!--
项目   jgp-cloud-parent
作者   LOUFEI [Gavin]
时间   2019/1/8
-->
[@JGP.head "Title"]
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <link rel="stylesheet" href="/workflow/designer/diagram-viewer/style.css" type="text/css" media="screen">


    <style type="text/css" media="screen">

    </style>
[/@JGP.head]
[@JGP.body]
    <div class="wrapper">
        <div id="pb1"></div>
        <div id="overlayBox">
            <div id="diagramBreadCrumbs" class="diagramBreadCrumbs" onmousedown="return false" onselectstart="return false"></div>
            <div id="diagramHolder" class="diagramHolder"></div>
            [#--<div class="diagram-info" id="diagramInfo"></div>--]
        </div>
    </div>
[/@JGP.body]

[@JGP.foot]
    <script src="/workflow/designer/diagram-viewer/js/jstools.js" type="text/javascript" charset="utf-8"></script>
    <script src="/workflow/designer/diagram-viewer/js/raphael.js" type="text/javascript" charset="utf-8"></script>

    <script src="/workflow/designer/diagram-viewer/js/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="/workflow/designer/diagram-viewer/js/jquery/jquery.progressbar.js" type="text/javascript" charset="utf-8"></script>
    <script src="/workflow/designer/diagram-viewer/js/jquery/jquery.asyncqueue.js" type="text/javascript" charset="utf-8"></script>

    <script src="/workflow/designer/diagram-viewer/js/Color.js" type="text/javascript" charset="utf-8"></script>
    <script src="/workflow/designer/diagram-viewer/js/Polyline.js" type="text/javascript" charset="utf-8"></script>
    <script src="/workflow/designer/diagram-viewer/js/ActivityImpl.js" type="text/javascript" charset="utf-8"></script>
    <script src="/workflow/designer/diagram-viewer/js/ActivitiRest.js" type="text/javascript" charset="utf-8"></script>
    <script src="/workflow/designer/diagram-viewer/js/LineBreakMeasurer.js" type="text/javascript" charset="utf-8"></script>
    <script src="/workflow/designer/diagram-viewer/js/ProcessDiagramGenerator.js" type="text/javascript" charset="utf-8"></script>
    <script src="/workflow/designer/diagram-viewer/js/ProcessDiagramCanvas.js" type="text/javascript" charset="utf-8"></script>
    <script language='javascript'>
        var DiagramGenerator = {};
        var pb1;
        var processDefinitionId = '${procDefId!''}';
        var processInstanceId = '${procId!''}';
        var processInstanceName = '${procName!''}';
        $(document).ready(function () {
            var query_string = {};
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                query_string[pair[0]] = pair[1];
            }


            console.log("Initialize progress bar");

            pb1 = new $.ProgressBar({
                boundingBox: '#pb1',
                label: 'Progressbar!',
                on: {
                    complete: function () {
                        console.log("Progress Bar COMPLETE");
                        this.set('label', '加载完成!');
                        if (processInstanceId) {
                            ProcessDiagramGenerator.drawHighLights(processInstanceId);
                        }
                    },
                    valueChange: function (e) {
                        this.set('label', e.newVal + '%');
                    }
                },
                value: 0
            });

            ProcessDiagramGenerator.options = {
                diagramBreadCrumbsId: "diagramBreadCrumbs",
                diagramHolderId: "diagramHolder",
                diagramInfoId: "diagramInfo",
                processInstanceName:processInstanceName,
                on: {
                    click: function (canvas, element, contextObject) {
                        var mouseEvent = this;
                        if(contextObject.properties.type === 'userTask'){
                            JGP.$post('/workflow/processApiController/queryProcessTaskAssignee', {
                                procId:processInstanceId,
                                //taskDefKey:contextObject.id
                            }, function (re) {
                                for (var i = 0; i < re.data.gdata.length; i++) {
                                    if(re.data.gdata[i].taskDefinitionKey === contextObject.id){
                                        if(re.data.gdata[i].assignee == null){
                                            JGP.$alert("当前环节："+re.data.gdata[i].name+"<br>处理人："+ re.data.gdata[i].nextAssigneeName)
                                        }else {
                                            JGP.$alert("当前环节："+re.data.gdata[i].name+"<br>处理人："+ re.data.gdata[i].assigneeName)
                                        }
                                    }

                                }
                            }, function (re) {

                            })

                        }

                        /*if (contextObject.getProperty("type") == "callActivity") {
                            var processDefinitonKey = contextObject.getProperty("processDefinitonKey");
                            var processDefinitons = contextObject.getProperty("processDefinitons");
                            var processDefiniton = processDefinitons[0];
                            console.log("Load callActivity '" + processDefiniton.processDefinitionKey + "', contextObject: ", contextObject);

                            // Load processDefinition
                            ProcessDiagramGenerator.drawDiagram(processDefinitonKey);
                        }*/
                    },
                    rightClick: function (canvas, element, contextObject) {
                        var mouseEvent = this;
                        console.log("[RIGHTCLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
                    },
                    over: function (canvas, element, contextObject) {
                        var mouseEvent = this;
                        //console.log("[OVER] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);

                        // TODO: show tooltip-window with contextObject info
                        ProcessDiagramGenerator.showActivityInfo(contextObject);
                    },
                    out: function (canvas, element, contextObject) {
                        var mouseEvent = this;
                        //console.log("[OUT] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);

                        ProcessDiagramGenerator.hideInfo();
                    }
                }
            };

            var baseUrl = window.document.location.protocol + "//" + window.document.location.host + "/";
            var shortenedUrl = window.document.location.href.replace(baseUrl, "");
            baseUrl = baseUrl + shortenedUrl.substring(0, shortenedUrl.indexOf("/"));

            ActivitiRest.options = {
                processInstanceHighLightsUrl: "/workflow/process-instance/{processInstanceId}/highlights?callback=?",
                processDefinitionUrl: "/workflow/process-definition/{processDefinitionId}/diagram-layout?callback=?",
                processDefinitionByKeyUrl: "/workflow/process-definition/{processDefinitionKey}/diagram-layout?callback=?"
            };

            if (processDefinitionId) {
                ProcessDiagramGenerator.drawDiagram(processDefinitionId);

            } else {
                alert("processDefinitionId parameter is required");
            }
        });


    </script>
[/@JGP.foot]